<template>
  <div class="writeArticle">
    <div class="title" @click="writeShow">
      <span>{{type}}</span>
      <i class="iconfont" :class="{'icon-unfolded-s':iconActive,'icon-shrink-s':!iconActive}"></i>
    </div>
    <div class="add-wrap" v-show="writeBoke">
      <div class="add-title">
        <label for="addTitle">标题 :</label>
        <input type="text" placeholder="请输入文章标题" id="addTitle" v-model="title"/>
      </div>
      <div class="add-title">
        <label for="cate">分类 :</label>
        <select id="cate" v-model="cate">
          <option value="--请选择--">--请选择--</option>
          <option value="设计文章">设计文章</option>
        </select>
      </div>
      <div class="textarea">
        <textarea placeholder="请尽情书写你的设计" v-model="myBoke"></textarea>
      </div>
      <div class="input-file">
        <input type="file" />
        <button class="file">选择图片</button>
        <button class="add" @click="submit">確定</button>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        name: "writeArticle",
        props:["types"],
        data(){
          return {
            writeBoke:false,
            iconActive:true,
            myBoke:"",
            cate:"",
            title:""
          }
        },
      computed:{
        type(){
          return this.types
        }
      },
        methods:{
        writeShow(){
          this.writeBoke=!this.writeBoke;
          this.writeBoke?this.iconActive=false:this.iconActive=true;
        },
          submit(){
            (this.title.trim()&&this.cate&&this.myBoke.trim())?(()=>{

           /*   this.$http.post("http://localhost:8081/article/designArticle",{title:this.title,cate:this.cate,ct:this.myBoke}).then(()=>{*/
                this.$emit("change",{title:this.title,cate:this.cate,ct:this.myBoke});
                this.title="";
                this.cate="";
                this.myBoke=""
                this.$message({
                  message:"添加成功!",
                  type:"success"
                })
            /*  });*/
            })():null;

          }
      }
    }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/writeArticle";
</style>
